import React, {PureComponent} from 'react'
import echarts from 'echarts';
import setBaseChart from '../chart/base-chart'
import {setTitle, scale, tooltip} from '../chart/util/common'

class Bar extends PureComponent {

    componentWillReceiveProps(nextProps){
        const {data} = nextProps
        this.myChart.setOption({
            // legend: {
            //     data: data.yAxisData.map(t=>t.name),
            // },
            xAxis: [{
                data: data.xAxisData,
            }],
            series:data.yAxisData
            // series:data.yAxisData.map(y=>{
            //     return {
            //         name: '时间',
            //         type: 'bar',
            //         label: {
            //             normal: {
            //                 show: false,
            //                 position: 'top',
            //                 textStyle: {
            //                     color: '#fff',
            //                     fontSize: 12 * scale
            //                 }
            //             }
            //         },
            //         lineStyle: {
            //             normal: {
            //                 width: 2 * scale,
            //                 shadowColor: 'rgba(0,0,0,0.4)',
            //                 shadowBlur: 10,
            //                 shadowOffsetY: 10
            //             }
            //         },
            //         data: [1, 13, 37]
            //     }
            // })
            //
        });
    }

    componentDidMount() {
        const {setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const xData = function () {
            const data = [];
            for (let i = 1; i < 8; i++) {
                data.push(i + "号");
            }
            return data;
        }();

        const option = {
            tooltip: {
                ...tooltip,
                trigger: 'axis',
                formatter: function (params, ticket, callback) {

                    var res = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {
                        if (params[i].seriesType === 'line') {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + 'h';
                        } else {
                            if(params[i].seriesName.indexOf('时间')!==-1){
                                res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + 's';
                            }else {
                                res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '个';
                            }
                        }
                    }
                    return res;

                }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: '5%',
                bottom: 0,
                containLabel: true
            },
            // legend: {
            //     // data: ['时间', '人均个数', '总体个数'],
            //     bottom: 10 * scale,
            //     itemWidth: 25 * scale,
            //     itemHeight: 12 * scale,
            //     textStyle: {
            //         color: '#fff',
            //         fontSize: 12 * scale
            //     }
            // },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": true
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                data: []
            }],
            yAxis: [{
                type: 'value',
                name: '温度',
                min: 0,
                position: 'left',
                nameTextStyle:{
                    color: '#fff',
                    fontSize: 12 * scale
                },
                axisLabel: {
                    formatter: '{value}℃',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": false
                },
            }, {
                type: 'value',
                name: '时间',
                min: 0,
                position: 'right',
                nameTextStyle:{
                    color: '#fff',
                    fontSize: 12 * scale
                },
                axisLabel: {
                    formatter: '{value} S',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": false
                },
            }],
            series: []
        };
        this.myChart.setOption(option);
    }

    render() {
        return (
            <div style={{width: '100%', height: '100%'}} ref='chart'/>
        )
    }

}

export default setBaseChart(Bar)